<template>
    <div class="flex-box">
        <div style="display: flex;background: #EFEFF4;align-items: center">
            <div style='width: 30px;padding-left: 10px;' @click="barcode">
              <i class="iconfont icon-31saoma" style="font-size:25px;"></i>
            </div>

            <search
                    position="absolute"
                    auto-scroll-to-top
                    top="0px"
                    v-model="searchs"
                    @on-focus="onFocus"
                    ref="search">
            </search>
            <div>
                <div @click="article">
                    <i class="iconfont icon-add" style="font-size:25px;padding-right: 10px;"></i>
                </div>
            </div>
        </div>
        <scroller :lockY="true">
            <div style="width:100%;display: flex;height: 40px;line-height:40px;    background: #f9f9f9;
    border-bottom: 1px solid #f3f3f3;">
                <span v-for="(item,index) in menu" style="overflow: hidden;text-align:center;flex: 1;font-size: 14px;"
                      @click="menu_item(item.id,index)" :class="{active:isActive==index}">
                {{item.title}}
                </span>
            </div>
        </scroller>

        <div class="flex-item" style="display: flex;flex-direction: column;" ref="swiperHeight">

            <swiper :show-dots="false" v-model="swiperItemIndex" @on-index-change="onSwiperItemIndexChange"
                    :height="swiperHeight" :threshold="100">
                <swiper-item class="black" v-for="(item,index) in menu">
                    <scroller v-show="show"
                              :lockX=true
                              :scrollbar-y=false
                              :scrollbar-x=false
                              @on-pulldown-loading="pull_down(index)"
                              @on-pullup-loading="pull_up(index)"
                              :pulldown-config="{downContent: '正在加载', loadingContent:'正在加载',upContent:'释放更新',content:'....'}"
                              :pullup-config="{ downContent: '正在加载',loadingContent:'正在加载',upContent:'释放更新',content:'....'}"
                              :use-pulldown=true
                              :use-pullup=false
                              :bounce="bounce"
                              :height="swiperHeight"
                              ref="scrollerBottom">
                        <div>
                            <panel :list="list[index]" :type="articleType" ></panel>

                        </div>

                    </scroller>
                </swiper-item>
            </swiper>

        </div>
        <div v-transfer-dom>
        <loading :show="show1" text=""></loading>

        </div>
        <toast v-model="showPositionValue" :time="1000"  width="14.6em" :type="type" is-show-mask :text="message" :position="position"></toast>
        <foots></foots>
    </div>
</template>

<script>
    import {Scroller, Panel, LoadMore, Search, Badge, Popup, TransferDom, Swiper, SwiperItem,Loading,Toast} from 'vux'
    import heads from '../header';
    import foots from '../footer';

    export default {
        name: "index",
        directives: {
            TransferDom
        },
        components: {
            Scroller,
            Panel,
            LoadMore,
            Search,
            heads,
            foots,
            Badge,
            Popup,
            Swiper,
            SwiperItem,
            Loading,
            Toast
        },
        watch: {},
        computed: {
            user_state () {
                return this.$store.getters.user_state
            }
        },
        methods: {
            article(){
                if(!this.user_state){
                    this.message='登录后操作';
                    this.showPositionValue=true;
                    this.type='warn'
                }else{
                    this.$router.push('article')
                }
            },
            barcode(){
                if(!this.user_state){
                    this.message='登录后方可使用扫一扫';
                    this.showPositionValue=true;
                    this.type='warn'
                }else{
                    this.$router.push('barcode')
                }
            },
            onFocus() {

            },


            getArticle(status = 0, index = 0, id) {
                if(status==0){
                    this.show1=true;
                }
                var info = [];
                var _this = this;
                this.$axios.get(this.$axios.defaults.baseURL+'article', {
                    params :{
                    id:id,
                    page: this.page[index],
                        search:_this.searchs,
                        pageSize:this.pageCount
                }
                }).then(function (res) {
                    _this.show1=false;
                    for(var i=0;i<res.data.data.length;i++){
                        var box=[],url=[],meta=[];

                        box['id']=res.data.data[i].id;
                        box['src']='static/images/nopic.png';
                        box['title']=res.data.data[i].title.substr(0,20);
                        box['desc']=res.data.data[i].content.substr(0,50);
                        url['path']='/content?id='+res.data.data[i].id;
                        url['replace']=false;
                        meta['date']=res.data.data[i].created_at;
                        meta['other']='';
                        meta['source']='';
                        box['url']=url;
                        box['meta']=meta;
                        info[i]=box;
                    }


                    if(info.length==_this.pageCount){
                        _this.page[index]=  _this.page[index]+1;

                    }

                    for(var i=0;i<_this.list[index].length;i++){
                        for(var j=0;j<info.length;j++){
                            if(_this.list[index][i].id ==info[j].id){
                                info.splice(j,1)
                            }
                        }
                    }

                    if (status == 1) {
                        setTimeout(() => {

                            _this.$set(_this.list,index,_this.list[index].concat(info));
                            _this.$refs.scrollerBottom[index].donePullup();

                        }, 1000)
                    }

                    else if (status == 2) {
                        setTimeout(() => {

                            _this.$set(_this.list,index, info.concat(_this.list[index]));
                            _this.$refs.scrollerBottom[index].donePulldown();

                        }, 1000)

                    } else {
                        _this.show = true;
                        _this.$set(_this.list,index,info);
                    }


                }).catch(function (err) {
                    _this.show1=false
                    console.log(err)
                })

            },
            pull_up(index) {
                this.index=index;
                this.getArticle(1, index, this.init_menu_id);
            },
            pull_down(index) {
                this.index=index;
                this.getArticle(2, index, this.init_menu_id);
            },
            get_menu() {
                var _this=this;
                this.$axios.get(this.$axios.defaults.baseURL+'articleType',{}).then(function (res) {

                    if(res.data.state==true){
                        _this.menu=res.data.data;
                        for (var i = 0; i < _this.menu.length; i++) {
                            _this.list[i] = []
                            _this.page[i]=1;
                        }
                        _this.init_menu_id= res.data.data[0]['id']

                        _this.getArticle(0, 0, _this.init_menu_id);
                    }

                }).catch(function (err) {
                    console.log(err)
                })



            },
            menu_item(id, index) {

                this.swiperItemIndex = index;
                this.isActive = index;
                this.init_menu_id = id;
            },
            onSwiperItemIndexChange(index) {


                this.init_menu_id = this.menu[index].id;
                this.isActive = index;
                this.swiperItemIndex = index;
                if (this.list[index].length == 0) {
                    this.getArticle(0, index, this.init_menu_id)
                }
            },
        },

        data() {
            return {
                title: '首页',
                bounce: true,
                articleType: '5',
                list: [],
                page:[],
                data: [],
                show: false,
                show1:false,
                init_menu_id: 1,
                menu: [],
                isActive: false,
                swiperItemIndex: 0,
                swiperHeight: 0 + 'px',
                showPositionValue:false,
                message:null,
                type:'success',
                position:'middle',
                pageCount:5,
                searchs:'',
                index:''
            }
        },
        created: function () {
            this.get_menu();
        },
        mounted() {
            var height = this.$refs.swiperHeight.offsetHeight;
            this.swiperHeight = height + 'px';
        }
    }
</script>


<style lang="less" scoped>
    @import "../../assets/css/comm";
    a {
        color: #828282;;
    }
</style>